import React, { useEffect, useState } from 'react';
import { SmileOutlined, ShopOutlined, LockOutlined } from '@ant-design/icons';
import {
    Button,
    Cascader,
    Divider,
    DatePicker,
    Form,
    Input,
    Checkbox,
    Col,
    Row,
    Modal,
    message
} from 'antd';
import Welcome from '../../components/welcome'
import Title from '../../components/title/title'
import './css/AddPark.css'
import Store from '../../store/index.js'
import { createAddParkAction,createModifyParkAction } from '../../store/action.js'



const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 15,
    },
};
const formTailLayout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 8,
        offset: 20,
    },
};
const wayLayout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 15,
    },
};
// 省市区下拉框数据
const options = [
    {
        value: '四川省',
        label: '四川省',
        children: [
            {
                value: '成都市',
                label: '成都市',
                children: [
                    {
                        value: '武侯区',
                        label: '武侯区',
                    },
                ],
            },
        ],
    },
    {
        value: '山东省',
        label: '山东省',
        children: [
            {
                value: '潍坊市',
                label: '潍坊市',
                children: [
                    {
                        value: '坊子区',
                        label: '坊子区',
                    },
                ],
            },
        ],
    },
]
// 所选省市区下拉框变化
const onChange = (value) => {
    console.log(value);
};


const AddPark = (props) => {
    console.log(props)
    const {isModify,data}=props.location.state
    const [parkTable, setparkTable] = useState(Store.getState().parkTable);
    const [form] = Form.useForm();
    const [checkNick, setCheckNick] = useState(false);
    useEffect(() => {
        form.validateFields(['nickname']);
    }, [checkNick, form]);

    const onCheckboxChange = (e) => {
        setCheckNick(e.target.checked);
    };

    const onCheck = async () => {
        try {
            const values = await form.validateFields();
            values.key = parkTable.length.toString()
            values.id = 'YQ000' + parkTable.length
            values.province = values.region[0]
            values.city = values.region[1]
            values.district = values.region[2]
            if(isModify){
Modal.confirm({
                title: '修改园区',
                content: `你确认修改${values.name}吗？`,
                onOk: () => {
                    Store.dispatch(createModifyParkAction(values))
                    message.success('修改成功!')
                }
            })
            } else {
                Modal.confirm({
                title: '新增园区',
                content: `你确认新增${values.name}吗？`,
                onOk: () => {
                    Store.dispatch(createAddParkAction(values))
                    message.success('新增成功!')
                }
            })
            }
            props.history.push('/park')
        } catch (errorInfo) {
            console.log('Failed:', errorInfo);
        }
    };
    return (
        <>
            <div className='content'>
                <Welcome />
                <Divider />
                <Title title={ isModify  ? '编辑园区' : '新增园区'} />
                <Divider />
                <Form form={form} name="dynamic_rule" initialValues={data}>
                    <div style={{ fontSize: '1.2rem', paddingBottom: '1rem' }}>
                        <ShopOutlined style={{ color: 'rgb(25, 158, 216)', marginRight: '1rem' }} /><span>园区基础信息</span>
                    </div>
                    <Form.Item    
                    
                        {...formItemLayout}
                        name="name"
                        label="园区名称"
                        rules={[
                            {
                                required: true,
                                message: '请输入园区名称',
                                min: 5,
                            },
                        ]}
                    >
                        <Input placeholder="请输入园区名称" />
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        name="limited"
                        label="园区限量"
                        rules={[
                            {
                                required: true,
                                message: '请输入园区限量',
                            },
                        ]}
                    >
                        <Input placeholder="请输入园区限量" />
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        initialValue={isModify?[data.province,data.city,data.district]:[]}
                        name="region"
                        label="所属地区"
                        rules={[
                            {
                                type: 'array',
                                required: true,
                                message: '请输入园区所属地区',
                            },
                        ]}
                    >
                        <Cascader options={options} onChange={onChange} placeholder="Please select" />
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        name="address"
                        label="具体地址"
                        rules={[
                            {
                                required: checkNick,
                            },
                        ]}
                    >
                        <Input placeholder="请输入具体地址" />
                    </Form.Item>
                    <div style={{ fontSize: '1.2rem', paddingBottom: '1rem' }}>
                        <ShopOutlined style={{ color: 'rgb(25, 158, 216)', marginRight: '1rem' }} /><span>园区税率信息</span>
                    </div>
                    <Form.Item
                        {...formItemLayout}
                        name="way"
                        label="征收方式"
                        rules={[
                            {
                                required: true,
                                message: '请选择征收方式',
                            },
                        ]}
                    >
                        <Checkbox.Group>
                            <Row>
                                <Col span={12}>
                                    <Checkbox value="A" style={{ lineHeight: '32px' }}>
                                        查账征收
                                    </Checkbox>
                                </Col>
                                <Col span={12}>
                                    <Checkbox value="B" style={{ lineHeight: '32px' }} >
                                        核定征收（应税所得率）
                                    </Checkbox>
                                </Col>
                                <Col span={12}>
                                    <Checkbox value="C" style={{ lineHeight: '32px' }}>
                                        核定征收（带征率/附征率）
                                    </Checkbox>
                                </Col>
                                <Col span={12}>
                                    <Checkbox value="D" style={{ lineHeight: '32px' }}>
                                        其他
                                    </Checkbox>
                                </Col>
                            </Row>
                        </Checkbox.Group>
                        {/* <Row>
                            <span style={{ color: 'orange', fontSize: '0.8rem' }}>（次选择项为生产经营个税征收方式，可多选）</span>
                        </Row> */}

                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        name="taxable"
                        label="应税所得率："
                        rules={[
                            {
                                required: true,
                                message: '请输入应税所得率',
                            },
                        ]}
                    >
                        <Input placeholder="请输入应税所得率" addonAfter="%" />
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        name="incomeTax"
                        label="个税带征率/附征率："
                        rules={[
                            {
                                required: true,
                                message: '请输入个税带征率/附征率',
                            },
                        ]}
                    >
                        <Input placeholder="请输入个税带征率/附征率" addonAfter="%" />
                    </Form.Item>

                    <Form.Item
                        {...formItemLayout}
                        name="consultIndustry"
                        label="咨询服务业个税带征率/附征率："
                        rules={[
                            {
                                required: true,
                                message: '请输入咨询服务业个税带征率/附征率',
                            },
                        ]}
                    >
                        {/* prefix={<LockOutlined style={{ textAlign: 'right' }} />} */}
                        <Input placeholder="请输入咨询服务业个税带征率/附征率" addonAfter="%" />
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        name="surcharge"
                        label="附加税种类："
                        rules={[
                            {
                                required: checkNick,
                            },
                        ]}
                    >
                        <Form.Item
                            {...wayLayout}
                            name="cityBuildingDuty"
                            label="城建税"
                            rules={[
                                {
                                    required: checkNick,
                                },
                            ]}
                        >
                            <Input placeholder="Please input your nickname" addonAfter="%" />
                        </Form.Item>
                        <Form.Item
                            {...wayLayout}
                            name="otherOne"
                            label="其他附加税一"
                            rules={[
                                {
                                    required: checkNick,
                                },
                            ]}
                        >
                            <Row>
                                <Col span={12}>
                                    <Input placeholder="请输入附加税名称" />
                                </Col>
                                <Col span={12}>
                                    <Input placeholder="请输入附加税税率" addonAfter="%" />
                                </Col>
                            </Row>
                        </Form.Item>
                        <Form.Item
                            {...wayLayout}
                            name="otherTwo"
                            label="其他附加税二"
                            rules={[
                                {
                                    required: checkNick,
                                },
                            ]}
                        >
                            <Row>
                                <Col span={12}>
                                    <Input placeholder="请输入附加税名称" />
                                </Col>
                                <Col span={12}>
                                    <Input placeholder="请输入附加税税率" addonAfter="%" />
                                </Col>
                            </Row>
                        </Form.Item>
                        <Form.Item
                            {...wayLayout}
                            name="otherThree"
                            label="其他附加税三"
                            rules={[
                                {
                                    required: checkNick,
                                },
                            ]}
                        >
                            <Row>
                                <Col span={12}>
                                    <Input placeholder="请输入附加税名称" />
                                </Col>
                                <Col span={12}>
                                    <Input placeholder="请输入附加税税率" addonAfter="%" />
                                </Col>
                            </Row>
                        </Form.Item>
                        <Form.Item
                            {...wayLayout}
                            name="otherfour"
                            label="其他附加税四"
                            rules={[
                                {
                                    required: checkNick,
                                },
                            ]}
                        >
                            <Row>
                                <Col span={12}>
                                    <Input placeholder="请输入附加税名称" />
                                </Col>
                                <Col span={12}>
                                    <Input placeholder="请输入附加税税率" suffix="%" />
                                </Col>
                            </Row>
                        </Form.Item>
                        {/* <Input placeholder="Please input your nickname" /> */}
                    </Form.Item>
                    <div style={{ fontSize: '1.2rem', paddingBottom: '1rem' }}>
                        <ShopOutlined style={{ color: 'rgb(25, 158, 216)', marginRight: '1rem' }} /><span>备注信息</span>
                    </div>
                    <Form.Item
                        {...formItemLayout}
                        name="note"
                        label="备注信息："
                        rules={[
                            {
                                required: checkNick,
                                message: 'Please input your nickname',
                            },
                        ]}
                    >
                        <Input.TextArea showCount maxLength={100} placeholder='请输入备注信息' />
                    </Form.Item>

                    <Form.Item {...formTailLayout}>
                        <Button type="primary" onClick={onCheck}>
                            保存
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </>
    );
}

export default AddPark;
